<!doctype html>
<html lang="en">
  <head>
    <script type="module" crossorigin src="/frontend-mini-challenges/javascript/assets/index-CKXrdYRS.js"></script>
    <link rel="modulepreload" crossorigin href="/frontend-mini-challenges/javascript/assets/navbar-PAFhV-cJ.js">
    <link rel="modulepreload" crossorigin href="/frontend-mini-challenges/javascript/assets/header-DIqzw3PH.js">
    <link rel="stylesheet" crossorigin href="/frontend-mini-challenges/javascript/assets/navbar-Dkne97UN.css">
    <link rel="stylesheet" crossorigin href="/frontend-mini-challenges/javascript/assets/header-DAZPOirm.css">
    <link rel="stylesheet" crossorigin href="/frontend-mini-challenges/javascript/assets/index-x7dyeiI-.css">
  </head>
  <body>
    <div class="container text-center">
      <p>
        The four in a row rules are very simple. It’s always played with 2 players and in a 7x6
        grid. Each turn each player puts a piece of his color inside a column and it will fall until
        it reaches the lowest available spot. The one who can put 4 pieces of the same color in a
        row horizontally, vertically or diagonally wins. If no one manages to do it then the match
        ends in a draw.
      </p>

      <div id="slots" class="slots"></div>
      <div id="board" class="board"></div>

      <div class="button-holder">
        <button id="reset" class="btn btn-primary">Reset</button>
      </div>

      <h3 id="info"></h3>
    </div>
  </body>
</html>
